<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章列表页面</title>
</head>
<body>
<div id="app">
    <h3 v-model="nickname">欢迎,{{nickname}}</h3>

    <a href="javascript:void(0)" @click="logout();">退出登录</a>
    <br>
    <a href="javascript:void(0)" @click="deleteUser();">注销用户</a>
    <br>
    <br>
    <button @click="change()">新增</button>
    <ul>
        <li v-for="article in articles">
            <a href="javascript:void(0)" @click="toDetail(article.id)">{{article.title}}
            </a>
            <button @click="change(article.id)">修改</button>
            /
            <button @click="deleteArticle(article.id)">删除</button>
        </li>
    </ul>
</div>


<script type="application/javascript" src="js/vue.js"></script>
<script type="application/javascript" src="js/axios.js"></script>

<script>
    let app = new Vue({
        el: "#app",
        data: {
            nickname: '',
            user: {},
            articles: [],
        },
        created: function () {
            axios.get("article")
                .then(function (resp) {
                    let body = resp.data;
                    let content = "";
                    if (body.success) {
                        app.nickname = body.data.user.nickname || {};
                        app.articles = body.data.articleList || {};
                    } else {
                        alert(body.message)
                    }
                })
        },
        methods: {
            toDetail: function (id) {
                localStorage.setItem('id', id);
                window.location.href = "detail.html";
            },
            change: function (id) {
                if (id) {//id有值，为修改操作
                    localStorage.setItem("type", "edit")
                    localStorage.setItem("id", id)
                } else {//新增操作
                    localStorage.setItem("type", "add")
                    localStorage.removeItem("id")//新增时不需要id字段
                }
                //跳转到文章新增/修改页面
                window.location.href = "articleChange.html"
            },
            deleteArticle: function (id) {
                let r = confirm("你是否要删除该文章？删除后不可恢复");
                if (r) {
                    axios.get("delete?id=" + id)
                        .then(function (resp) {
                            let body = resp.data;
                            if (body.success) {
                                alert("操作成功")
                                window.location.reload()
                            } else {
                                alert("操作失败")
                            }
                        })
                } else {
                    alert("取消删除！")
                }
            },
            logout: function () {
                //注销功能：发送Ajax请求，服务端删除session保存的user
                axios.get("logout")//绑定的是后端的url
                    .then(function (resp) {
                        let body = resp.data;
                        if (body.success) {
                            app.user = {};
                            window.location.href = "public/login.html"
                        } else {
                            alert(body.message)
                        }
                    })
            },
            deleteUser: function () {
                let r = confirm("你是否要注销用户？用户注销后会将该账号的全部信息永久清除，该过程不可逆。")
                if (r){
                    axios.get("deleteUser")
                    .then(function (resp) {
                        let body = resp.data;
                        if (body.success) {
                            alert("注销成功")
                            window.location.href="public/home.html"
                        } else {
                            alert("注销失败")
                        }
                    })
                }else{
                    alert("取消注销！")
                }
            },
        }
    })
</script>
</body>
</html>